<template>
  <div class="AppointExamineMsg">

    <el-dialog title="心电诊断" :visible.sync="dialogFormVisible" :center="isCenter" width="1240px">
      <el-form :model="dataForm" ref="dataForm" :rules="roleRules" label-width="150px">
        <el-form-item label="心电图片" prop="imageList">
          <viewer :images="imageList">
            <div class="img_box">
              <img class="appoint_img" v-for="src in imageList" :src="src" :key="src">
            </div>
          </viewer>
        </el-form-item>

        <el-form-item label="诊断结论" prop="examineMsg">
          <el-input style="width: 91%;" type="textarea" v-model="dataForm.examineMsg" autocomplete="off" :rows="5" :cols="30"></el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button @click.native="clickCancel">取 消</el-button>
          <el-button type="primary" :loading="dialogDisabled" @click.native="clickCommit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import AppointApi from "@/api/appoint/appoint";

  export default {
    name: 'AppointExamineMsg',
    props: {
      /*appointId: {
        type: Number,
        default: null
      }*/
    },
    data() {
      return {
        dataForm:{
          appointId:"",
          examineMsg:""
        },
        imageList: [],
        dialogFormVisible: false,
        dialogDisabled: false,
        isCenter: true,
        roleRules: {
          examineMsg: [
            { required: true, message: "请输入诊断结论", trigger: "blur" },
            { max: 500, message: '诊断结论不超过500个字', trigger: 'blur' }
          ],
        }
      }
    },
    components: {
    },
    methods: {
      listImage () {
        let _this = this
        let cond = {
          appointId : _this.dataForm.appointId
        }
        AppointApi.listHealthFile(cond)
          .then(res => {
            if (res.data){
              _this.imageList = res.data
            }
          })
          .catch(error => {
            _this.pickInstitutionList = []
            console.error(error)
          })
      },
      clickCancel(){
        this.dialogFormVisible = false;
        this.dataForm.examineMsg="";
        this.dataForm.appointId="";
      },
      clickCommit() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.dialogDisabled = true
            this.addData();
          }
        })
      },
      addData(){
        let _this = this;
        AppointApi.addExamine(this.dataForm)
          .then((res) =>{
            _this.$emit('refreshPage', true)
            _this.dialogFormVisible = false
            _this.dialogDisabled = false
            _this.$Utils.notifySuccess()
          }).catch(error => {
          _this.dialogDisabled = false
          console.error(error)
        })
      },
      handleCreate(val) {
        this.dataForm.appointId = val
        this.dialogFormVisible = true
        this.dialogDisabled = false
        this.listImage();
      }

    }
  }
</script>
<style lang="scss">
  .variant-input {
    margin-top: 2px
  }

  .AddUserHelp .country_ul {
    position: relative;
  }

  .country_ul .country_tabs {
    float: left;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    margin-bottom: -4px;
  }

  .country_ul .country_tabs li {
    float: left;
    cursor: pointer;
    background-color: #eee;
    width: 60px;
    height: 35px;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-radius: 6px;
  }

  .country_ul .country_tabs .active {
    background-color: #fff;
  }

  .country_ul .country_tabs li a {
    span {
      line-height: 30px;
      margin-left: 15px;
    }
  }

  .variant_btn {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .img_box{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 950px;
  }

  .appoint_img{
    height: 370px;
    width: 300px;
    border: solid 1px;
    margin: 0 5px;
  }
</style>
